<template>
	<div v-if="!item.common.isHidden" @tap="handleTap" class="myLabel" :style="commonStyle">
		<div :style="innerStyle" :class="{lineBreakMode1line: item.style.lineBreakMode && item.style.lineBreakLines === 1,lineBreakModemanylines: item.style.lineBreakMode && item.style.lineBreakLines > 1}">
			{{ labelText(item.common.text) }}
		</div>
	</div>
</template>

<script>
	import {
		handleEvent,
		removeHTMLTag
	} from '../libs/utils.js';
	import calcBaseStyle from '../libs/calcBaseStyle'
	export default {
		name: 'myLabel',
		props:{
			listData: null,
			pageConfig: {
				type: Object,
				default(){
					return {}
				}
			},
			pcid: null
		},
		data() {
			return {
				item: {
					common: {},
					style: {}
				},
			}
		},
		inject: ['options'],
		created() {
			this.$parent.widgetList.some(widget=>{
				if(widget.cid === this.pcid){
					this.item = widget
					return true
				}
			})
		},
		computed: {
			labelText() {
				return text => {
					return removeHTMLTag(text)
				}
			},
			commonStyle() {
				var basic = calcBaseStyle(this.item,this.pageConfig.contentH)
				var item = this.item
				return basic + 'align-items:'+this.vAlignMap(item.style.vAlign)+
					';border-radius:'+item.style.borderRadius+'rpx;border:'+item.style.borderStyle+' '+
					item.style.borderColor+' '+item.style.borderWidth+'rpx;background-color:'+item.style.bgColor+
					';opacity:'+item.style.opacity + ';'
			},
			innerStyle() {
				var item = this.item
				var innerHeight = item.common.height - item.style.borderWidth * 2,
					lineHeight;
				if (item.style.lineBreakMode) {
					lineHeight = innerHeight / item.style.lineBreakLines;
				} else {
					lineHeight = item.style.lineHeight;
				}
				var textAlign = 'text-align:'+item.style.textAlign+';'
				if(item.style.textAlign === 'justify'){
					textAlign += 'text-align-last:justify;'
				}
				return (
					'font-size:' +
					item.style.fontSize +
					'rpx;letter-spacing:' +
					item.style.letterSpacing +
					'px;font-weight:' +
					item.style.fontWeight + ';color:' +
					item.style.color + ';' +
					'text-indent:' +
					item.style.textIndent * item.style.fontSize +
					'rpx;-webkit-line-clamp:' +
					item.style.lineBreakLines +
					';line-height:' +
					lineHeight +
					'rpx;'+textAlign+'width:100%;'
				);
			},
			vAlignMap(){
				var obj = {
					top:'flex-start',
					center:'center',
					bot:'flex-end'
				}
				return valign=>{
					return obj[valign]
				}
			},
		},
		methods: {
			handleTap() {
				handleEvent(this.item.event, this.listData || {}, this.pageConfig, this.options);
			},
		}
	}
</script>

<style lang="less" scoped>
	.myLabel {
		position: absolute;
		box-sizing: border-box;
		overflow: hidden;
		white-space: normal;
		display: flex;
	}

	.lineBreakMode1line {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.lineBreakModemanylines {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
</style>
